<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>派生、子代选择器</title>
		<style>
			/* ⑥派生选择器：后代选择器，用于选中祖先范围内所有匹配的子孙元素
			 语法：任意选择器【祖先元素】 任意选择器【祖先元素当中所有匹配的子元素】{}
			 */
			#header span{
				display: block;
				width: 50%;  /* ？问题*/
				background-color: #999999;
			}
			#header span:hover{
				background-color: #00ff00;
			}
			/* ⑦子代选择器：通过父子关系元素，选择子元素
			   语法：任意选择器【父元素】任意选择器【父元素中所有匹配的子元素】{}
			   实现：选中左导航，颜色：#8f8f8f
			 */
			#header>span{
				background-color: #00ff00;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<span>左导航</span>
			<span> <div class="header">
			<span>右1导航</span>
			<span>右2导航</span>
			</div>
			 </span>
			</div>
	</body>
</html>